﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="cHead" ContentPlaceHolderID="head" runat="server">
  <title><%= Html.Encode(ViewData["Title"])%></title>
    <%= Html.Script("~/Scripts/Account/Register.js")%>

    <script type="text/javascript">
        // <![CDATA[
        $(document).ready(function () {
            documentLoad();
        })
        // ]]>
    </script>
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Register</h2>
    <div>
        <p>
            Items marked with an asterisk (*) are mandatory.
        </p>
    </div>
    <div id="divErrorMessages">
        <div>
            <h3><a href="#">Please fix these errors</a></h3>
            <div id="divErrors">
            </div>
        </div>
    </div>
    <div id="userProfile">
        <div id="Details-1" class="accordion_item">
            <h3> <a href="#">Mandatory Information</a></h3>
            <div id="#Details-1-Content">
            <table class="TableStyle">
                <tr>
                    <td>
                        User Name:
                    </td>
                    <td>
                        <input id="txtUsername" type="text" />
                        *
                    </td>
                </tr>
                <tr>
                    <td>
                        Password:
                    </td>
                    <td>
                        <input id="Password1" type="password" />
                        * Password is required to be a minimum of
                        <%=Html.Encode(ViewData["PasswordLength"])%>
                        characters in length.
                    </td>
                </tr>
                 <tr>
                    <td>
                        Repeat Password:
                    </td>
                    <td>
                        <input id="Password2" type="password" />
                        *
                    </td>
                </tr>
                <!--
                <tr>
                    <td style="vertical-align:top">
                    Avatar:
                    </td>
                    <td style="vertical-align: top">
                        <div>
                            <img id="picAvatar" src="" alt="" />
                            <input id="btnChangeAvatar" type="button" value="Change Avatar ..." />
                        </div>
                        
                        <div style="display:none" id="divAvatar">
                            <table>
                                <tr>
                                    <td colspan="3">
                                    Either choose an existing avatar ...
                                    </td>
                                </tr>
                                <tr>
                                    <td><img id="imgPerson1" class="avatarImages" src="" alt="Person1" style="width:100px;height:100px"/></td>
                                    <td><img id="imgPerson2" class="avatarImages" src="" alt="Person2" style="width:100px;height:100px"/></td>
                                    <td><img id="imgPerson3" class="avatarImages" src="" alt="Person3" style="width:100px;height:100px"/></td>
                                    <td><img id="imgPerson4" class="avatarImages" src="" alt="Person4" style="width:100px;height:100px"/></td>
                                </tr>
                                <tr>
                                    <td colspan="3">
                                         Or upload your own: 
                                        <div id="txtAvatarBrowse" class="button">
                                            Upload
                                        </div>                                       
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    <input id="btnAvatarCancel" type="button" value="Close"/></td>
                                    <td colspan="3">
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
               -->
               <tr>
                    <td>
                        Firstname:
                    </td>
                    <td>
                        <input id="txtFirstname" type="text" /> *
                    </td>
                </tr>                
                <tr>
                    <td>
                        Lastname:
                    </td>
                    <td >
                        <input id="txtLastname" type="text" /> *
                    </td>
                </tr>                
                <tr>
                    <td>
                        Email:
                    </td>
                    <td >
                        <input id="txtEmail" type="text" /> * &nbsp Please enter a valid email address.
                        A confirmation link will sent to you via email.
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        I accept the <a href="#" target="_blank">terms and conditions</a>:
                        <input id="chkTerms" type="checkbox"/> *
                    </td>
                </tr>
            </table>
            </div>
        </div>
        <div id="Details-2" class="accordion_item">
            <h3> <a href="#">Personal Details (Optional)</a></h3>
            <div>
            <table class="TableStyle">              
                <tr>
                    <td>
                        Nickname:
                    </td>
                    <td >
                        <input id="txtNickname" type="text" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Sex:
                    </td>
                    <td >
                        <select id="drpSex">
                            <option value="M">Male</option>
                            <option value="F">Female</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        Date of Birth:
                    </td>
                    <td >
                        <input id="txtDateOfBirth" type="text" />
                    </td>
                </tr>                
            </table>            
            </div>
        </div>
        <div id="Details-3" class="accordion_item">
            <h3> <a href="#">Contact Details (Optional)</a></h3>
            <div>
            <table>
                <tr>
                    <td>Phone:</td>
                    <td><input id="txtPhone" type="text" /></td>
                </tr>
                 <tr>
                    <td>Mobile:</td>
                    <td><input id="txtMobile" type="text"/></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td>
                        <select id="drpCountry">
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td>
                         <select id="drpState"  >
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Postcode:</td>
                    <td>
                        <input id="txtPostcode" />
                    </td>
                </tr>
            </table>
            </div>
        </div>
        <div id="Details-4" class="accordion_item">
            <h3> <a href="#">Notification Preferences (Optional)</a></h3>
            <div>
             <table style="width:250px">
                <tr>
                    <td>Accept Community Email:</td>
                    <td><input id="chkCommunityEmail" type="checkbox" checked="checked" /> </td>
                </tr>
                <tr>
                    <td>Accept Advertising Email:</td>
                    <td><input id="chkAdvertisingEmail" type="checkbox" checked="checked" /> </td>
                </tr>
            </table>
            </div>
        </div>  
    </div>
     <div class="Buttonstyle">
            <input id="Create" type="button" value="Create" />
            <input id="Cancel" type="button" value="Cancel" />
     </div>
     <div id="RegisterSuccess" style="display:none">
        <p>
        Thank you for registering. <br />
        A confirmation email has been sent to <span id="confirmationEmail"></span>. <br />
        Please click on the activation link in your email to activate your account.
        </p>
     </div>
</asp:Content>


